<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>朔望 -图库查询交易</title>
    <!-- swiper CSS -->
    <link rel="stylesheet" href="/Syzygy/static/css/swiper-bundle.min.css"/>
    <!-- 轮播图 css -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <!--    Rem初始化-->
    <script src="/Syzygy/static/js/RemInitialize.js"></script>
    <!--    jquery-->
    <script src="/Syzygy/static/js/jQuery-3.2.1-min.js"></script>
    <!-- swiper js -->
    <script src="/Syzygy/static/js/swiper-bundle.min.js"></script>
</head>

<body style="padding: 0 0;margin: 0 0">
<!-- 导航栏与轮播图 -->
<div class="swiper mySwiper" style="height: 0.3rem">
    <!--    导航栏-->
    <div style="width:1rem;height: 0.04rem;position: absolute;z-index: 2">
        <!--        logo-->
        <div style="float:left;width: 0.1rem;height:0.04rem;">
            <img src="/Syzygy/static/imgs/page/logo.png"
                 style="float: left;width: 0.07rem;height: 0.03rem;margin: 0.005rem 0.015rem">
        </div>
        <!--        导航1-->
        <a href="/Syzygy/">
            <div style="float:left;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                    主页
                </div>
            </div>
        </a>
        <!--        导航2-->
        <div style="float:left;width: 0.1rem;height:0.04rem;">
            <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                导航2
            </div>
        </div>
        <!--        导航3-->
        <div style="float:left;width: 0.1rem;height:0.04rem;">
            <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                导航3
            </div>
        </div>
        <!--        导航4-->
        <div style="float:left;width: 0.1rem;height:0.04rem;">
            <div style="margin: 0.006rem;font-size: 0.02rem;color: white;text-align: center">
                导航4
            </div>
        </div>
        <!--        登录与注册-->
        <div th:unless="${user}" style="float: right;width: 0.17rem;height: 0.04rem">
            <!--        登录-->
            <div style="float:right;width: 0.1rem;height:0.04rem;">
                <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                    <a href="/Syzygy/User/Login" style="color:white;text-decoration: none;">
                        登录
                    </a>
                </div>
            </div>
            <!--        注册-->
            <div style="float:right;width: 0.07rem;height:0.04rem;color: white;text-align: center;font-size: 0.02rem">
                <div style="margin: 0.006rem 0 ">
                    <a href="/Syzygy/User/Create" style="color: white;text-decoration: none">
                        注册
                    </a>
                </div>

            </div>
        </div>
        <!--        注销 -->
        <div th:if="${user}" style="float:right;width: 0.1rem;height:0.04rem;">
            <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                <a href="/Syzygy/User/Logout" style="color:white;text-decoration: none;">
                    注销
                </a>
            </div>
        </div>
        <!--        创作者中心 -->
        <div th:if="${user}" style="float:right;width: 0.12rem;height:0.04rem;">
            <div style="margin: 0.006rem;font-size: 0.02rem;color: white;border: solid white;text-align: center">
                <a href="/Syzygy/User/Manage" style="color:white;text-decoration: none;">
                    创作者中心
                </a>
            </div>
        </div>
    </div>
    <!--    轮播图-->
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color: red">
            <img src="/Syzygy/static/imgs/pictures/a1.jpg">
        </div>
        <div class="swiper-slide" style="background-color: orange">
            <img src="/Syzygy/static/imgs/pictures/a2.jpeg">
        </div>
        <div class="swiper-slide" style="background-color: yellow">
            <img src="/Syzygy/static/imgs/pictures/a3.jpeg">
        </div>
        <div class="swiper-slide" style="background-color: green">
            <img src="/Syzygy/static/imgs/pictures/a4.jpeg">
        </div>
        <div class="swiper-slide" style="background-color: aquamarine">
            <img src="/Syzygy/static/imgs/pictures/a5.jpg">
        </div>
        <div class="swiper-slide" style="background-color: blue">
            <img src="/Syzygy/static/imgs/pictures/a6.jpg">
        </div>
        <div class="swiper-slide" style="background-color: blueviolet">
            <img src="/Syzygy/static/imgs/pictures/a7.jpeg">
        </div>
    </div>
    <!--    向右图标-->
    <div class="swiper-button-next"></div>
    <!--    向左图标-->
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
<!--主要内容-->
<div style="width: 1rem;height: auto">
    <!--    左侧导航-->
    <div style="float:left;width: 0.12rem;height: auto;color: black;text-align: left">
        <!--        发现-->
        <div style="width: 0.11rem;height: 0.04rem;background-color: rgb(200,200,200);margin: 0.01rem 0.01rem;font-size: 0.025rem;border-radius: 0.03rem">
            <img src="/Syzygy/static/imgs/page/c1.png"
                 style="float:left;width: 0.03rem;height: 0.03rem;margin: 0.005rem 0 0.005rem 0.014rem">
            <div style="float: left;margin: 0.0014rem">
                <a href="/Syzygy/" style="text-decoration: none;color: black">
                    发现
                </a>
            </div>
        </div>
        <!--        发布-->
        <div style="width: 0.11rem;height: 0.04rem;background-color: rgb(200,200,200);margin: 0.01rem 0.01rem;font-size: 0.025rem;border-radius: 0.03rem">
            <img src="/Syzygy/static/imgs/page/c2.png"
                 style="float:left;width: 0.03rem;height: 0.03rem;margin: 0.005rem 0 0.005rem 0.014rem">
            <div style="float: left;margin: 0.0014rem">
                <a href="/Syzygy/Picture/Release/" style="text-decoration: none;color: black">
                    发布
                </a>
            </div>
        </div>
        <!--        我-->
        <div th:if="${user}"
             style="width: 0.11rem;height: 0.04rem;background-color: rgb(200,200,200);margin: 0.01rem 0.01rem;font-size: 0.025rem;border-radius: 0.03rem">
            <a th:if="${user}" th:href="@{'/User/Homepage/'+${user.userId}}" style="text-decoration: none;color: black">
                <img th:src="@{'/static/imgs/headsculpture/' + ${user.headSculptureDocumentName}}"
                     style="float:left;width: 0.03rem;height: 0.03rem;margin: 0.005rem 0 0.005rem 0.014rem">
                <div style="float: left;margin: 0.0014rem">
                    我
                </div>
            </a>
        </div>
    </div>
    <!--    右侧内容-->
    <div style="float:left;width: 0.88rem;height: auto;margin: 0.01rem 0 0 0 ">
        <!-- 类型导航栏 -->
        <div id="typeNavigation" style="width: 0.8rem;height: 0.04rem;margin: 0 0.01rem">
            <button id="allType" class="typeButtons"
                    style="float:left;width:0.06rem;height: 0.03rem;margin: 0 0.005rem;background-color: rgb(200,200,200);font-size: 0.02rem;text-align: center;border-radius: 0.03rem;border-color: rgba(1,1,1,0)">
                <a href="/Syzygy/" style="text-decoration: none;color: black">
                    全部
                </a>
            </button>
            <table>
                <tr th:each="type : ${allType}" style="float: left">
                    <td>
                        <button class="typeButtons" th:id="@{'typeButton'+${type.typeId}}" th:text="${type.typeName}"
                                style="float:left;width:0.06rem;height: 0.03rem;margin:-0.002rem 0.005rem;background-color: rgb(250,250,250);font-size: 0.02rem;text-align: center;border-radius: 0.03rem;border-color: rgba(1,1,1,0)">
                        </button>
                    </td>
                </tr>
            </table>

        </div>
        <!--        总图文-->
        <div id="cards" style="width: 0.88rem;">
            <div id="line1" style="float:left;width: 0.2rem;margin: 0 0.01rem"></div>
            <div id="line2" style="float:left;width: 0.2rem;margin: 0 0.01rem"></div>
            <div id="line3" style="float:left;width: 0.2rem;margin: 0 0.01rem"></div>
            <div id="line4" style="float:left;width: 0.2rem;margin: 0 0.01rem"></div>
        </div>
        <!--        分页-->
        <div style="float:left;width: 0.88rem;height:0.05rem;">
            <div style="text-align:center;display:flex;justify-content:space-between;font-size:0.02rem;width: 0.6rem;height: 0.03rem;margin: 0.01rem auto;">
                <a style="width: 0.08rem;height:0.03rem;border-radius: 0.03rem;background-color: rgb(220,220,220);text-decoration: none;color: black"
                   th:if="${page.hasPreviousPage}" href="/Syzygy/Page/1">首页</a>
                <a style="width: 0.08rem;height:0.03rem;border-radius: 0.03rem;background-color: rgb(220,220,220);text-decoration: none;color: black"
                   th:if="${page.hasPreviousPage}" th:href="@{'/Page/'+${page.prePage}}">上一页</a>
                <span th:each="pageNumber :${page.navigatepageNums}">
                    <a style="display:block;width: 0.04rem;height:0.03rem;line-height:0.03rem;border-radius: 0.03rem;background-color: rgb(190,190,190);text-decoration: none;color: red"
                       th:if="${page.pageNum == pageNumber }"  th:href="@{'/Page/'+${pageNumber}}"
                       th:text="${pageNumber}"></a>
                    <a style="display:block;width: 0.04rem;height:0.03rem;line-height:0.03rem;border-radius: 0.04rem;background-color: rgb(220,220,220);text-decoration: none;color: black"
                       th:if="${page.pageNum != pageNumber }" th:href="@{'/Page/'+${pageNumber}}"
                       th:text="${pageNumber}"></a>
                </span>
                <a style="width: 0.08rem;height:0.03rem;border-radius: 0.03rem;background-color: rgb(220,220,220);text-decoration: none;color: black"
                   th:if="${page.hasNextPage}" th:href="@{'/Page/'+${page.nextPage}}">下一页</a>
                <a style="width: 0.08rem;height:0.03rem;border-radius: 0.03rem;background-color: rgb(220,220,220);text-decoration: none;color: black"
                   th:if="${page.hasNextPage}" th:href="@{'/Page/'+${page.pages}}">末一页</a>
            </div>
        </div>
    </div>
</div>
<!--页脚-->
<iframe src="/Syzygy/templates/footer.html" scrolling="no"
        style="float:left;width: 1rem;height: 0.1rem;border:none;scale: 1.05"></iframe>
</body>
<script>
    let localhost = 'http://localhost:8080';
</script>
<!-- 轮播图 js -->
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>
<!--    index-->
<script th:inline="javascript">
    const line1 = document.querySelector('#line1');
    const line2 = document.querySelector('#line2');
    const line3 = document.querySelector('#line3');
    const line4 = document.querySelector('#line4');
    const typeNavigation = document.querySelector('#typeNavigation');
    const allTypeJSON = [[${allTypeJSON}]];
    let allType = JSON.parse(allTypeJSON);
    const allPictureAndUserAndTypePageJSON = [[${pageJSON}]];
    let allPictureAndUserAndTypePage = JSON.parse(allPictureAndUserAndTypePageJSON);
    let allPictureAndUserAndType = allPictureAndUserAndTypePage.list;
    console.log(allPictureAndUserAndTypePage);
    console.log(allPictureAndUserAndType);
</script>
<!--添加图文卡片-->
<script th:inline="javascript">
    // 添加图文卡片
    for (let i = 0; i < allPictureAndUserAndType.length; i++) {
        let pictureDocumentName = allPictureAndUserAndType[i].pictureDocumentName;
        let pictureId = allPictureAndUserAndType[i].pictureId;
        let pictureDescribe = allPictureAndUserAndType[i].describe;
        let pictureUserHeadSculptureDocumentName = allPictureAndUserAndType[i].user.headSculptureDocumentName;
        let pictureUserNickname = allPictureAndUserAndType[i].user.nickname;
        let pictureUserId = allPictureAndUserAndType[i].user.userId;
        if (allPictureAndUserAndType[i].state != 1) {
            continue;
        }
        let cardStr = `
                <div style="float:left;width:0.2rem;margin: 0 0 0.01rem 0">
                    <!--        图片-->
                    <div  id="Card unfolding ${pictureId}" style="width: 0.2rem" >
                    <a href="/Syzygy/Picture/Details/${pictureId}" style="width: 0.2rem">
                        <img  src="/Syzygy/static/imgs/pictures/${pictureDocumentName}" style="max-width: 100%;border-radius: 0.01rem">
                    </a>
                    </div>
                    <!--   文字与用户信息 -->
                    <div style="width: 0.18rem;height: 0.06rem;margin:0 0.01rem;font-size: 0.012rem">
                        <!-- 文字 -->
                        <div style="height: 0.033rem;">
                        <a href="details/${pictureId}" style="width: 0.18rem;height: 0.033rem;text-decoration: none;color: black">
                            ${pictureDescribe}
                        </a>
                        </div>
                        <!-- 用户信息 -->
                        <div href="" style="height: 0.024rem;">
                            <a href="/Syzygy/User/Homepage/${pictureUserId}">
                            <!-- 头像 -->
                            <div style="float:left;height: 100%;width:0.024rem">
                                <img src="/Syzygy/static/imgs/headsculpture/${pictureUserHeadSculptureDocumentName}" style="float: left;max-width: 100%">
                            </div>
                            <!-- 昵称 -->
                            <div style="float:left;color: rgb(100,100,100);margin: 0.003rem 0 0 0.003rem">
                                ${pictureUserNickname}
                            </div>
                            </a>
                        </div>
                    </div>
                </div>
               `;
        if (i % 4 == 0) {
            line1.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 1) {
            line2.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 2) {
            line3.insertAdjacentHTML("beforeend", cardStr)
        } else if (i % 4 == 3) {
            line4.insertAdjacentHTML("beforeend", cardStr)
        }
    }
</script>
<!--类型导航点击事件-->
<script th:inline="javascript">
    // 类型导航添加点击事件
    for (let i = 0; i < allType.length; i++) {
        (function () {
            let typeId = allType[i].typeId;
            let typeButtonId = "#typeButton" + typeId;
            let typeButtonId2 = "typeButton" + typeId;
            const typeButton = document.getElementById(typeButtonId2);
            let typeButtons = document.getElementsByClassName('typeButtons');
            // 按钮切换图片显示
            $('#typeNavigation').on('click', typeButtonId, function () {
                    // 变换图片
                    $.ajax({
                        url: localhost + "/Syzygy/Picture/TypeId/" + typeId,
                        dataType: 'json',
                        type: 'get',
                        scriptCharset: 'utf-8',
                        success: function (result) { // 请求后台 应答成功返回来的数据
                            console.log()
                            console.log('异步调用返回的数据为：', result);
                            // const picturesByType = JSON.parse(result);
                            // 添加图文卡片
                            const line1 = document.querySelector('#line1');
                            const line2 = document.querySelector('#line2');
                            const line3 = document.querySelector('#line3');
                            const line4 = document.querySelector('#line4');
                            line1.innerHTML = "";
                            line2.innerHTML = "";
                            line3.innerHTML = "";
                            line4.innerHTML = "";
                            for (let i = 0; i < result.length; i++) {
                                let pictureDocumentNameByType = result[i].pictureDocumentName;
                                let pictureIdByType = result[i].pictureId;
                                let pictureDescribeByType = result[i].describe;
                                let pictureUserHeadSculptureDocumentNameByType = result[i].user.headSculptureDocumentName;
                                let pictureUserNicknameByType = result[i].user.nickname;
                                let pictureUserIdByType = result[i].user.userId;

                                let cardStrByType = `
                <div style="float:left;width:0.2rem;margin: 0 0 0.01rem 0">
                    <!--        图片-->
                    <div  id="Card unfolding ${pictureIdByType}" style="width: 0.2rem" >
                    <a href="/Syzygy/Picture/Details/${pictureIdByType}" style="width: 0.2rem">
                        <img  src="/Syzygy/static/imgs/pictures/${pictureDocumentNameByType}" style="max-width: 100%;border-radius: 0.01rem">
                    </a>
                    </div>
                    <!--   文字与用户信息 -->
                    <div style="width: 0.18rem;height: 0.06rem;margin:0 0.01rem;font-size: 0.012rem">
                        <!-- 文字 -->
                        <div style="height: 0.033rem;">
                        <a href="details/${pictureIdByType}" style="width: 0.18rem;height: 0.033rem;text-decoration: none;color: black">
                            ${pictureDescribeByType}
                        </a>
                        </div>
                        <!-- 用户信息 -->
                        <div href="" style="height: 0.024rem;">
                            <a href="/Syzygy/User/Homepage/${pictureUserIdByType}">
                            <!-- 头像 -->
                            <div style="float:left;height: 100%;width:0.024rem">
                                <img src="/Syzygy/static/imgs/headsculpture/${pictureUserHeadSculptureDocumentNameByType}" style="float: left;max-width: 100%">
                            </div>
                            <!-- 昵称 -->
                            <div style="float:left;color: rgb(100,100,100);margin: 0.003rem 0 0 0.003rem">
                                ${pictureUserNicknameByType}
                            </div>
                            </a>
                        </div>
                    </div>
                </div>
                                        `;
                                if (i % 4 == 0) {
                                    line1.insertAdjacentHTML("beforeend", cardStrByType)
                                } else if (i % 4 == 1) {
                                    line2.insertAdjacentHTML("beforeend", cardStrByType)
                                } else if (i % 4 == 2) {
                                    line3.insertAdjacentHTML("beforeend", cardStrByType)
                                } else if (i % 4 == 3) {
                                    line4.insertAdjacentHTML("beforeend", cardStrByType)
                                }
                            }
                        },
                        error: function (xhr, status, error) { // 请求失败运行的函数
                            console.log(error);
                        }
                    })
                    // 背景变色
                    for (let j = 0; j < typeButtons.length; j++) {
                        typeButtons[j].style.backgroundColor = "rgb(250,250,250)";
                    }
                    typeButton.style.backgroundColor = "rgb(200,200,200)";
                }
            );


        }());
    }
</script>


</html>